<template>
	<view class="fare-box">
		<view class="tc-box">
			<p class="tc-box-p" >增加车费申请</p>
			<p class="tc-box-item">
				<view class="">
					<input class="input-box" v-model="amount" placeholder="增加金额" type="digit" >
				</view>
				<view class="tc-box-item-area">
					<textarea class="memo" placeholder="申请原因" v-model="remark"></textarea>
				</view>
			</p>
			<view class="car-btn-box">
				<view class="car-btn"  @click="cancel()">取消</view>
				<view class="car-btn"  @click="confirm()">确定</view>
			</view>
				
		</view>
	</view>
</template>

<script>
	export default {
		name:"fare-apply-item",
		props: {
			item: {
				type: Object,
				default: {}
			},
		},
		data() {
			return {
				amount: '',
				remark: '',
			};
		},
		methods: {
			cancel() {
				let data = {
					item: this.item,
					amount: this.amount,
					remark: this.remark,
				};
				this.$emit('tocancel', data);
			},
			confirm() {
				let data = {
					item: this.item,
					amount: this.amount,
					remark: this.remark,
				};
				if (data.amount == "") {
					uni.showToast({title: '请输入增加金额',icon: "error"});
					return;
				}
				this.$emit('toconfirm', data);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.fare-box{
		
		.tc-box-item{
			margin: 20rpx;
		}
		.tc-box-p {
			font-size: 22px;
			font-weight: 500;
			color: #333539;
			text-align: center;
		}
		
		
		.tc-box {
			padding-top: 10rpx;
			width: 343px;
			height: 230px;
			background: #FFFFFF;
			border-radius: 18px;
			margin: 0 auto;
			margin-top: 200rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
		}
		
		.tc {
			position: fixed;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			background: rgba(0, 0, 0, 0.2);
			z-index: 999;
		}
		.car-btn-box {
			display: flex;
		    justify-content: space-around;
			border-top: 1px solid #EAEAF0;
			padding-top: 20rpx;
		}
		.memo {
			border: 2rpx solid #f0f0f0;
			width: 100%;
			height: 100rpx;
			padding: 8rpx;
			box-sizing: border-box;
		}
		.input-box{
			border: 2rpx solid #EAEAF0;
		}
		.tc-box-item-area{
			margin-top: 20rpx;
		}
		
	}
</style>